<template>
  <el-dialog
    title="任命部门"
    :visible="isShow"
    width="50%"
    @close="handleClose"
    @open="handleOpen"
  >
    <!-- 表单 -->
    <el-form
      ref="form"
      label-width="100px"
      :model="deptForm"
      :rules="deptFormRules"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name"></el-input>
      </el-form-item>
      <el-form-item label="部门编号" prop="code">
        <el-input v-model="deptForm.code"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="deptForm.manager"
          placeholder="请选择活动区域"
          style="width: 90%"
        >
          <el-option
            :label="item.username"
            :value="item.username"
            v-for="item in managerList"
            :key="item.id"
          />
          <el-option label="老二" value="beijing" />
        </el-select>
      </el-form-item>

      <el-form-item label="部门简介" prop="introduce">
        <el-input
          type="textarea"
          v-model="deptForm.introduce"
          style="width: 90%"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAddDept">对滴</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getManagerListAPI, addDeptAPI } from "@/api/departments";
export default {
  name: "AddDept",
  data() {
    const validateName = (rule, value, callback) => {
      const isSame = this.deptList.some((item) => item.name === value);
      isSame
        ? callback(new Error(`[${value}]已经有人用了，你不行换一个呢？`))
        : callback();
    };
    const validateCode = (rule, value, callback) => {
      const isSame = this.deptList.some((item) => item.name === value);
      isSame
        ? callback(new Error(`[${value}]已经有人用了，你不行换一个呢？`))
        : callback();
    };
    return {
      //部门表单
      deptForm: {
        name: "",
        code: "",
        manager: "",
        introduce: "",
      },
      //部门表单校验规则
      deptFormRules: {
        name: [
          {
            required: true,
            message: "没有名字的部门不是好部门",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 50,
            message: "你的名字不合格，找你父母重起一个",
            trigger: ["change", "blur"],
          },
          {
            validator: validateName,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "没有编号的部门不是好部门",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 50,
            message: "这个编号不合格，重起一个",
            trigger: ["change", "blur"],
          },
          {
            validator: validateCode,
            trigger: "blur",
          },
        ],
        manager: [
          {
            required: true,
            message: "没有负责人的部门不是好部门",
            trigger: ["change", "blur"],
          },
        ],
        introduce: [
          {
            required: true,
            message: "没有介绍的部门不是好部门",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 50,
            message: "简简单单来个简介",
            trigger: ["change", "blur"],
          },
        ],
      },
      managerList: [],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    //弹窗打开时
    async handleOpen() {
      if (this.managerList.length) return;
      //发请求
      const resp = await getManagerListAPI();
      // 保存负责人列表
      this.managerList = resp.data;
    },
    //添加部门
    handleAddDept() {
      //整体校验
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        //发起新增请求
        console.log("1");
        await addDeptAPI({
          ...this.deptForm,
          //this.item.manager有值 则添加的不是一级部门  当前部门id就是新增部门id
          pid: this.item.manager ? this.item.id : "",
        });
        // 关闭弹窗
        this.handleClose();

        //获取部门列表
        this.$emit("shuXin");
      });
    },
    //当弹窗关闭时
    handleClose() {
      //触发自定义事件，通知父组件  关闭弹窗
      //父组件用了sync修饰符会自动监听@update:isShow事件
      // 并把接单后到的false赋值
      this.$emit("update:isShow", false);
      // 重置表单
      this.$refs.form.resetFields();
    },
    //
  },
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    deptList: {
      type: Array,
      default: () => [],
    },
    item: {
      type: Object,
      default: () => {},
    },
  },
};
</script>



<style>
</style>